<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head th:replace="common/style_script::head('如意后台登录','/static/bootstrap-3.3.7/css/bootstrap.css')">
	<meta  charset="UTF-8"/>
	<title>如意后台登录</title>
	</head>
	<link th:href="@{/static/backStageLogin.css}" rel="stylesheet"/>
	<body style="background-color:#F5F5F5">
		<div class="container">
        <div class="wrap">
            <header>
            	<em style="margin-left:30px;font-family:FZShuTi;font-weight:blod">
					ruyi&nbsp;如意后台管理系统</em>
			</header>
            <article>
                <section>
                    <aside>
                        <em>
                            <img th:src="@{/static/img/user.png}" />
                        </em>
                         <form id="backstagelogin_form" action="/thy/sys/toLogin" method="post">
                         	<input type="hidden" id="bs" name="bs" value="backstage"/>
                            <p class="name"><i></i>
                            	<input type="text" id="username" name="username" class="userName" placeholder="请输入用户名" />
                            	<span id="backstage_username_warning" style="display: none;color:red"></span>
                            </p>
                            
                            <p class="password"><i></i>
                            	<input type="password" id="password" name="password" class="pwd" placeholder="请输入密码" />
                            	<span id="backstage_password_warning" style="display: none;color:red"></span>
                            </p>
                            <p>
                            	<div class="form-group" style="margin-top:5px;width:100%;">
									<span id="login_msg2"></span>
								</div>
                            </p>
                            <button id="backstage_btn_submit">登录</button>
                            <p class="remember"><input type="checkbox" name="remember" />记住密码</p>
                            <p class="regist"><span>没有账号?</span><a href="regist.html">立即注册</a></p>
                            <div class="clear"></div>
                        </form>
                    </aside>
                   
                </section>               
            </article>
            <footer>
                <ul>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">人才招聘</a></li>
                    <li><a href="#">友情链接</a></li>
                    <li><a href="#">公司地址</a></li>
                    <li><a href="#">关注我们</a></li>
                </ul>
                <p>============================</p>
            </footer>
        </div>
    </div>
	</body>
	<script>
	$(function(){
		var username="";
		var password="";
		$("#username").blur(function(){
			username=$("#username").val().trim();
			if(username !=""){
				$("#backstage_username_warning").css("display","none");
			}
		})
		$("#password").blur(function(){
			password=$("#password").val().trim();
			if(password !=''){
				$("#backstage_password_warning").css("display","none");
			}
		})
		$("#backstage_btn_submit").click(function(){
			username=$("#username").val().trim();
			password=$("#password").val().trim();
			var $form=$("#backstagelogin_form");
			if(username==""){
				$("#backstage_username_warning").css("display","block");
				$("#backstage_username_warning").html("用户名不能为空!");
				return false;
			}
			if(password==""){
				$("#backstage_password_warning").css("display","block");
				$("#backstage_password_warning").html("密码不能为空!");
				return false;
			}
			//使用Ajax提交form表单
			$.ajax({
				type:'POST',
				url:$form.attr('action'),
				data:$form.serialize(),
				dataType:'json',
				beforeSend:function(){
					/* layer.msg('正在登陆......'); */
				},
				success:function(data){
					if(data.status==200){
						
					}else{
						$("#login_msg2").html(data.message);
					}
				},
				error:function(e){
					console.log(e);
					layer.msg('出错咯o(╥﹏╥)o,请与后台联系!',{
                        btn:'我知道了'
                    })
				}
			})
		})
	})
	</script>
</html>

